<template>
    <div class="dynamic-card">
        <!-- 栅格 -->
        <el-row class="row" :gutter="20">
            <el-col v-bind="config.colLayout" v-for="(item, index) in config.data" :key="index">
                <div :style="config.cardStyle">
                    <!-- 子组件 卡片每一项 -->
                    <DynamicCardItem :data="item" />
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="js">
import DynamicCardItem from "./cmps/dynamic-card-item/dynamic-card-item.vue"

const props = defineProps({
    config: {
        default: () => ({
            // 卡片样式
            cardStyle: {},
            // 布局配置
            colLayout: {
                xl: 24,
                lg: 24,
                md: 24,
                sm: 24,
                xs: 24
            },
            data: []
        })
    }
})
</script>
<style scoped lang="scss">
.dynamic-card {

    .row {
        row-gap: vh(20);
    }

}
</style>